<template>
  <div>
    <div v-if="shows" style="background: #fff;padding-top:0.3rem;">
      <div class="aces">
        <div class="aces_title">
          <div>{{aces_a.ace_num}}</div>
          <div>ACES</div>
          <div>{{aces_b.ace_num}}</div>
        </div>
        <div class="color">
          <div class="color_left">
            <div class="color_two" :class="{'color_one':aces_a.ace_num>aces_b.ace_num}" :style="{'width':''+aces_a.ace_num/(aces_a.ace_num+aces_b.ace_num)*100+'%'}"></div>
          </div>
          <div class="color_right">
            <div class="color_two" :class="{'color_one':aces_b.ace_num>aces_a.ace_num}" :style="{'width':''+aces_b.ace_num/(aces_a.ace_num+aces_b.ace_num)*100+'%'}"></div>
          </div>
        </div>
      </div>
           <div class="aces">
        <div class="aces_title">
          <div>{{aces_a.double_num}}</div>
          <div>双误</div>
          <div>{{aces_b.double_num}}</div>
        </div>
        <div class="color">
          <div class="color_left">
            <div class="color_two" :class="{'color_one':aces_a.double_num<aces_b.double_num}" :style="{'width':''+aces_a.double_num/(aces_a.double_num+aces_b.double_num)*100+'%'}"></div>
          </div>
          <div class="color_right">
            <div class="color_two" :class="{'color_one':aces_b.double_num<aces_a.double_num}" :style="{'width':''+aces_b.double_num/(aces_a.double_num+aces_b.double_num)*100+'%'}"></div>
          </div>
        </div>
      </div>
      <!-- 一发成功率 -->
     <div class="aces">
        <div class="aces_title">
          <div>{{aces_a.first_send_win_a}}/{{aces_a.first_send_total_a}}({{aces_a.first_send_success}}%)</div>
          <div>一发成功率</div>
          <div>{{aces_b.first_send_win_a}}/{{aces_b.first_send_total_a}}({{aces_b.first_send_success}}%)</div>
        </div>
       <div class="color">
          <div class="color_left">
            <div class="color_two" :class="{'color_one':aces_a.first_send_success>aces_b.first_send_success}" :style="{'width':''+(aces_a.first_send_success+aces_b.first_send_success)+'%'}"></div>
          </div>

         <div class="color_right">
            <div class="color_two" :class="{'color_one':aces_b.first_send_success>aces_a.first_send_success}" :style="{'width':''+(aces_a.first_send_success+aces_b.first_send_success)+'%'}"></div>
          </div>
        </div>
      </div>

      <div class="aces">
        <div class="aces_title">
          <div>{{aces_a.first_send_goal_a}}/{{aces_a.first_send_win_a}}({{aces_a.first_send_score}}%)</div>
          <div>一发得分率</div>
          <div>{{aces_b.first_send_goal_a}}/{{aces_a.first_send_win_a}}({{aces_b.first_send_score}}%)</div>
        </div>
        <div class="color">
          <div class="color_left">
            <div class="color_two" :class="{'color_one':aces_a.first_send_score>aces_b.first_send_score}" :style="{'width':''+aces_a.first_send_score+'%'}"></div>
          </div>
          <div class="color_right">
            <div class="color_two" :class="{'color_one':aces_b.first_send_score>aces_a.first_send_score}" :style="{'width':''+aces_b.first_send_score+'%'}"></div>
          </div>
        </div>
      </div>

      <div class="aces">
        <div class="aces_title">
          <div>{{aces_a.second_send_win_a}}/{{aces_a.second_send_total_a}}({{aces_a.second_send_success}}%)</div>
          <div>二发成功率</div>
          <div>{{aces_b.second_send_win_a}}/{{aces_b.second_send_total_a}}({{aces_b.second_send_success}}%)</div>
        </div>
        <div class="color">
          <div class="color_left">
            <div class="color_two" :class="{'color_one':aces_a.second_send_success>aces_b.second_send_success}" :style="{'width':''+aces_a.second_send_success+'%'}"></div>
          </div>
          <div class="color_right">
            <div class="color_two" :class="{'color_one':aces_b.second_send_success>aces_a.second_send_success}" :style="{'width':''+aces_b.second_send_success+'%'}"></div>
          </div>
        </div>
      </div>


      <div class="aces">
        <div class="aces_title">
          <div>{{aces_a.second_send_goal_a}}/{{aces_a.second_send_win_a}}({{aces_a.second_send_score}}%)</div>
          <div>二发得分率</div>
          <div>{{aces_b.second_send_goal_a}}/{{aces_b.second_send_win_a}}({{aces_b.second_send_score}}%)</div>
        </div>
        <div class="color">
          <div class="color_left">
            <div class="color_two" :class="{'color_one':aces_a.second_send_score>aces_b.second_send_score}" :style="{'width':''+aces_a.second_send_score+'%'}"></div>
          </div>
          <div class="color_right">
            <div class="color_two" :class="{'color_one':aces_b.second_send_score>aces_a.second_send_score}" :style="{'width':''+aces_b.second_send_score+'%'}"></div>
          </div>
        </div>
      </div>

      <div class="aces">
        <div class="aces_title">
          <div>{{aces_a.first_send_goal_a+aces_a.second_send_goal_a}}/{{aces_a.first_send_win_a+aces_a.second_send_total_a}}({{aces_a.serve_score}}%)</div>
          <div>发球得分率</div>
          <div>{{aces_b.first_send_goal_a+aces_b.second_send_goal_a}}/{{aces_a.first_send_win_a+aces_b.second_send_total_a}}({{aces_b.serve_score}}%)</div>
        </div>
        <div class="color">
          <div class="color_left">
            <div class="color_two" :class="{'color_one':aces_a.serve_score>aces_b.serve_score}" :style="{'width':''+aces_a.serve_score+'%'}"></div>
          </div>
          <div class="color_right">
            <div class="color_two" :class="{'color_one':aces_b.serve_score>aces_a.serve_score}" :style="{'width':''+aces_b.serve_score+'%'}"></div>
          </div>
        </div>
      </div>

      <div class="aces">
        <div class="aces_title">
          <div>{{aces_a.first_send_win_b-aces_a.first_send_goal_b+aces_a.second_send_win_b-aces_a.second_send_goal_b}}/{{aces_a.first_send_win_a+aces_a.second_send_total_a}}({{aces_a.catch_score}}%)</div>
          <div>接发球得分率</div>
          <div>{{aces_b.first_send_win_b-aces_b.first_send_goal_b+aces_b.second_send_win_b-aces_b.second_send_goal_b}}/{{aces_b.first_send_win_a+aces_b.second_send_total_a}}({{aces_b.catch_score}}%)</div>
        </div>
        <div class="color">
          <div class="color_left">
            <div class="color_two" :class="{'color_one':aces_a.catch_score>aces_b.catch_score}" :style="{'width':''+aces_a.catch_score+'%'}"></div>
          </div>
          <div class="color_right">
            <div class="color_two" :class="{'color_one':aces_b.catch_score>aces_a.catch_score}" :style="{'width':''+aces_b.catch_score+'%'}"></div>
          </div>
        </div>
      </div>

      <div class="aces">
        <div class="aces_title">
          <div>{{aces_a.retrieve_game_point_a}}/{{aces_a.game_point_b+aces_a.retrieve_game_point_a}}({{aces_a.save_game_point}}%)</div>
          <div>挽回破发点</div>
          <div>{{aces_b.retrieve_game_point_a}}/{{aces_b.game_point_b+aces_b.retrieve_game_point_a}}({{aces_b.save_game_point}}%)</div>
        </div>
        <div class="color">
          <div class="color_left">
            <div class="color_two" :class="{'color_one':aces_a.save_game_point>aces_b.save_game_point}" :style="{'width':''+aces_a.save_game_point+'%'}"></div>
          </div>
          <div class="color_right">
            <div class="color_two" :class="{'color_one':aces_b.save_game_point>aces_a.save_game_point}" :style="{'width':''+aces_b.save_game_point+'%'}"></div>
          </div>
        </div>
      </div>

      <div class="aces">
        <div class="aces_title">
          <div>{{aces_a.game_point_a}}/{{aces_a.game_point_a+aces_a.retrieve_game_point_b}}({{aces_a.success_game_point}}%)</div>
          <div>成功破发</div>
          <div>{{aces_b.game_point_a}}/{{aces_b.game_point_a+aces_b.retrieve_game_point_b}}({{aces_b.success_game_point}}%)</div>
        </div>
        <div class="color">
          <div class="color_left">
            <div class="color_two" :class="{'color_one':aces_a.success_game_point>aces_b.success_game_point}" :style="{'width':''+aces_a.success_game_point+'%'}"></div>
          </div>
          <div class="color_right">
            <div class="color_two" :class="{'color_one':aces_b.success_game_point>aces_a.success_game_point}" :style="{'width':''+aces_b.success_game_point+'%'}"></div>
          </div>
        </div>
      </div>

      <div class="aces">
        <div class="aces_title">
          <div>{{aces_a.first_area_goal_a + aces_a.first_area_total_b - aces_a.first_area_goal_b}}/{{aces_a.first_area_total_a + aces_a.first_area_total_b}}({{aces_a.first_area_score}}%)</div>
          <div>一区得分率</div>
         <div>{{aces_b.first_area_goal_a+ aces_b.first_area_total_b - aces_b.first_area_goal_b}}/{{aces_b.first_area_total_a + aces_b.first_area_total_b}}({{aces_b.first_area_score}}%)</div>
        </div>
        <div class="color">
          <div class="color_left">
            <div class="color_two" :class="{'color_one':aces_a.first_area_score>aces_b.first_area_score}" :style="{'width':''+aces_a.first_area_score+'%'}"></div>
          </div>
          <div class="color_right">
            <div class="color_two" :class="{'color_one':aces_b.first_area_score>aces_a.first_area_score}" :style="{'width':''+aces_b.first_area_score+'%'}"></div>
          </div>
        </div>
      </div>

      <div class="aces">
        <div class="aces_title">
           <div>{{aces_a.second_area_goal_a + aces_a.second_area_total_b - aces_a.second_area_goal_b}}/{{aces_a.second_area_total_a + aces_a.second_area_total_b}}({{aces_a.second_area_score}}%)</div>
          <div>二区得分率</div>
           <div>{{aces_b.second_area_goal_a + aces_b.second_area_total_b - aces_b.second_area_goal_b}}/{{aces_b.second_area_total_a + aces_b.second_area_total_b}}({{aces_b.second_area_score}}%)</div>
        </div>
        <div class="color">
          <div class="color_left">
            <div class="color_two" :class="{'color_one':aces_a.second_area_score>aces_b.second_area_score}" :style="{'width':''+aces_a.second_area_score+'%'}"></div>
          </div>
          <div class="color_right">
            <div class="color_two" :class="{'color_one':aces_b.second_area_score>aces_a.second_area_score}" :style="{'width':''+aces_b.second_area_score+'%'}"></div>
          </div>
        </div>
      </div>

      <div class="aces">
        <div class="aces_title">
          <div>{{aces_a.total_score}}</div>
          <div>总得分</div>
          <div>{{aces_b.total_score}}</div>
        </div>
        <div class="color">
          <div class="color_left">
            <div class="color_two" :class="{'color_one':aces_a.total_score>aces_b.total_score}" :style="{'width':'100%'}"></div>
          </div>
          <div class="color_right">
            <div class="color_two" :class="{'color_one':aces_b.total_score>aces_a.total_score}" :style="{'width':'100%'}"></div>
          </div>
        </div>
      </div>
      <!-- 胜率 win_time（胜次） match_total（总场次） rate_of_winning（胜率） -->
      <div class="aces">
        <div class="aces_title">
          <div>{{aces_a.win_time}}/{{aces_a.match_total}}({{aces_a.rate_of_winning}}%)</div>
          <div>胜率</div>
          <div>{{aces_b.win_time}}/{{aces_b.match_total}}({{aces_b.rate_of_winning}}%)</div>
        </div>
        <div class="color">
          <div class="color_left">
            <div class="color_two" :class="{'color_one':aces_a.rate_of_winning>aces_b.rate_of_winning}" :style="{'width':''+aces_a.rate_of_winning+'%'}"></div>
          </div>
          <div class="color_right">
            <div class="color_two" :class="{'color_one':aces_b.rate_of_winning>aces_a.rate_of_winning}" :style="{'width':''+aces_b.rate_of_winning+'%'}"></div>
          </div>
        </div>
      </div>
      
    </div>
    <div v-if="!shows">暂无信息</div>
  </div>
</template>
<script>
  export default {
    props: {
      aces_a: Object,
      aces_b: Object,
      shows: Boolean
    },
    data() {
      return {

      }
    },
    mounted() {

    },
    methods: {

    }
  }
</script>
<style lang="less" scoped>
  .name {
    display: flex;
    justify-content: space-between;
    margin: 0.28rem 0 0.34rem;
    padding: 0 0.2rem;
    color: #259B24;

    .disk {
      width: 70%;
      margin: auto;

      span {
        padding: 0 0.1rem;
        margin: 0 0.1rem;
        box-sizing: border-box;
        border: 1px #fff solid;
      }

      .actives {
        border: 1px #259B24 solid;
        box-sizing: border-box;
      }
    }
  }

  .aces {
    margin-bottom: 0.3rem;

    .aces_title {
      padding: 0 0.2rem;
      display: flex;
      justify-content: space-between;
      margin-bottom: 0.1rem;
    }

    .color {
      display: flex;
      justify-content: space-between;
      height: 0.24rem;
      background: #DDDCDC;

      .color_left {
        display: flex;
        justify-content: flex-end;
        width: 50%;
 .color_two {
          height: 100%;
          background: #C0E6D1;
        }
        .color_one {
          height: 100%;
          background: #42B574;
        }
      }

      .color_right {
        display: flex;
        justify-content: flex-start;
        width: 50%;

        .color_two {
          height: 100%;
          background: #C0E6D1;
        }

        .color_one {
          height: 100%;
          background: #42B574;
        }


      }
    }
  }
</style>
